<template>
  <div>
    <el-col :span="24">
      <!--一行-->
      <el-row class="row" style="padding-bottom: 30px">
        <div class="center">
          <el-row :gutter="20">
            <el-col :span="24">
              <div class="h">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                  <el-breadcrumb-item><span class="san">标签</span>
                  </el-breadcrumb-item>
                </el-breadcrumb>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">

<!--              <div style="padding: 10px">
                <el-row>
                  <el-col :span="2" :offset="22">
                    <div>
                      <el-dropdown trigger="click">
                        <Icon type="ios-card-outline" size="20" color="#fff"/>
                        <el-dropdown-menu slot="dropdown">
                          <button @click="sort()" class="btn1">按人数排序</button><br>
                          <button @click="sort()" class="btn1">按热度排序</button><br>
                          <button @click="sort()" class="btn1">按优先级排序</button><br>
                        </el-dropdown-menu>
                      </el-dropdown>
                    </div>

                  </el-col>
                </el-row>
              </div>-->
              <!--一级-->
              <div class="rank" v-show="isShow1">
                <el-row>
                  <el-col :span="2">
                    <div class="stair">
                      <span>一级标签</span>
                    </div>
                  </el-col>
                  <el-col :span="22">

                    <draggable v-model="arr" :options="{group:'people'}" @start="drag=true" @end="drag=false">
                      <div class="frame btn" v-for="(arrAll,index) in arr" :class="{container,animated}">
                        <el-row>
                          <el-col :span="24">
                            <el-col :span="2">
                              <div @click="Sow()" style="width: 100%;height: 30px;line-height: 30px">
                                <el-checkbox></el-checkbox>
                              </div>
                            </el-col>
                            <el-col :span="16">
                              <div class="ones" @click="but(index)" v-show="show2">
                                <span>{{arrAll.name}}</span>
                              </div>
                            </el-col>
                            <el-col :span="6">
                              <div class="operation">
                                <el-col :span="24">
                                  <div class="rights">
                                    <el-col :span="12">
                                      <div class="rights">
                                        <i class="el-icon-edit"></i>
                                      </div>
                                    </el-col>
                                    <el-col :span="12">
                                      <div class="rights">
                                        <i class="el-icon-delete"></i>
                                      </div>
                                    </el-col>
                                  </div>
                                </el-col>
                              </div>
                            </el-col>
                          </el-col>
                        </el-row>
                      </div>
                    </draggable>

                  </el-col>
                </el-row>
              </div>
              <!--二级-->
              <div class="rank" v-show="isShow2">
                <el-row>
                  <el-col :span="2">
                    <div class="stair">
                      <span>二级标签</span>
                    </div>
                  </el-col>
                  <el-col :span="22">

                    <draggable v-model="cityArr" :options="{group:'people'}" @start="drag=true" @end="drag=false">
                      <div class="frame btn" v-for="(cityArr,index) in cityArr" :class="{container,animated}">
                        <el-row>
                          <el-col :span="24">
                            <el-col :span="2">
                              <div @click="Sow()" style="width: 100%;height: 30px;line-height: 30px">
<!--                                <Icon type="ios-arrow-dropdown"/>-->
                                <el-checkbox></el-checkbox>
                              </div>
                            </el-col>
                            <el-col :span="16">
                              <div class="ones" @click="but1(index)">
                                <span>{{cityArr.name}}</span>
                              </div>
                            </el-col>
                            <el-col :span="6">
                              <div class="operation">
                                <el-col :span="24">
                                  <div class="rights">
                                    <el-col :span="12">
                                      <div class="rights">
                                        <i class="el-icon-edit"></i>
                                      </div>
                                    </el-col>
                                    <el-col :span="12">
                                      <div class="rights">
                                        <i class="el-icon-delete"></i>
                                      </div>
                                    </el-col>
                                  </div>
                                </el-col>
                                <!--<el-col :span="24">
                                  <div class="rights">
                                    <span>100</span>
                                  </div>
                                </el-col>-->
                              </div>
                            </el-col>
                          </el-col>
                        </el-row>
                      </div>
                    </draggable>

                  </el-col>
                </el-row>
              </div>
              <!--三级-->
              <div class="rank" v-show="isShow3">
                <el-row>
                  <el-col :span="2">
                    <div class="stair">
                      <span>三级标签</span>
                    </div>
                  </el-col>
                  <el-col :span="22">

                    <draggable v-model="districtArr" :options="{group:'people'}" @start="drag=true" @end="drag=false">
                      <div class="frame btn" v-for="(districtArr,index) in districtArr" :class="{container,animated}">
                        <el-row>
                          <el-col :span="24">
                            <el-col :span="2">
                              <div @click="Sow()" style="width: 100%;height: 30px;line-height: 30px">
<!--                                <Icon type="ios-arrow-dropdown"/>-->
                                <el-checkbox></el-checkbox>
                              </div>
                            </el-col>
                            <el-col :span="16">
                              <div class="ones" @click="but2(index)">
                                <span>{{districtArr.name}}</span>
                              </div>
                            </el-col>
                            <el-col :span="6">
                              <div class="operation">
                                <el-col :span="24">
                                  <div class="rights">
                                    <el-col :span="12">
                                      <div class="rights">
                                        <i class="el-icon-edit"></i>
                                      </div>
                                    </el-col>
                                    <el-col :span="12">
                                      <div class="rights">
                                        <i class="el-icon-delete"></i>
                                      </div>
                                    </el-col>
                                  </div>
                                </el-col>
                                <!--<el-col :span="24">
                                  <div class="rights">
                                    <span>100</span>
                                  </div>
                                </el-col>-->
                              </div>
                            </el-col>
                          </el-col>
                        </el-row>
                      </div>
                    </draggable>

                  </el-col>
                </el-row>
              </div>

            </el-col>
          </el-row>
        </div>
      </el-row>
      <!--二行-->
      <el-row class="row" v-show="isShow4">
        <div class="center" style="padding-bottom: 70px">
          <el-row :gutter="20">
            <el-col :span="24">
              <div class="h">
                <h1>涉及医生</h1>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24" style="padding-top: 20px">
              <Doctor v-if="isRouterAlive"></Doctor>
            </el-col>
          </el-row>

        </div>
      </el-row>

    </el-col>
  </div>
</template>

<script>
  import Doctor from './doctor'
  import draggable from 'vuedraggable'

  export default {
    components: {
      Doctor,draggable
    },
    data() {
      return {
        show2: true,
        isRouterAlive: true,
        isShow1: true,
        isShow2: false,
        isShow3: false,
        isShow4: false,
        open1: false,
        container: false,
        animated: false,
        cityArr: [],
        districtArr: [],
        arr: [
          {
            name: '诊断',
            sub: [
              {
                name: '病原学诊断',
                sub: [
                  {
                    name: '链球菌'
                  },
                  {
                    name: '肺炎球菌'
                  },
                  {
                    name: '粪肠球菌'
                  },
                  {
                    name: '革兰阳性菌'
                  },
                  {
                    name: '革兰阴性菌'
                  },
                ],
                type: 0
              },
              {
                name: '部位选择',
                sub: [
                  {
                    name: '血液'
                  },
                  {
                    name: '唾液'
                  },
                  {
                    name: '尿液'
                  },
                  {
                    name: '腹腔液'
                  },
                ],
                type: 0
              },
              {
                name: '诊断方法',
                sub: [
                  {
                    name: '涂片检查（镜检）'
                  },
                  {
                    name: '不染色检查（镜检）'
                  },
                  {
                    name: '染色检查（镜检）'
                  },
                  {
                    name: '分离培养'
                  },
                  {
                    name: '分子生物诊断'
                  },
                  {
                    name: 'PCR'
                  },
                ],
                type: 0
              },
            ]
          },
          {
            name: '品牌选择',
            sub: [
              {
                name: '注射用头孢哌酮钠舒巴坦钠',
                sub: [
                  {
                    name: '疗效'
                  },
                  {
                    name: '副作用'
                  },
                  {
                    name: '额外获益'
                  },
                  {
                    name: '禁忌症'
                  },
                ],
                type: 0
              },
              {
                name: '注射用头孢哌酮钠',
                sub: [
                  {
                    name: '疗效'
                  },
                  {
                    name: '副作用'
                  },
                  {
                    name: '额外获益'
                  },
                  {
                    name: '经济性'
                  },
                  {
                    name: '转移性癌灶的姑息性放疗'
                  },
                ],
                type: 0
              },
            ]
          },
          {
            name: '确诊疾病',
            sub: [
              {
                name: '上呼吸道感染',
                sub: [
                  {
                    name: '轻度'
                  },
                  {
                    name: '中度'
                  },
                  {
                    name: '中重度'
                  },
                  {
                    name: '重度'
                  },
                ],
                type: 0
              },
              {
                name: '尿路感染',
                sub: [
                  {
                    name: '轻度'
                  },
                  {
                    name: '中度'
                  },
                  {
                    name: '中重度'
                  },
                  {
                    name: '重度'
                  }
                ],
                type: 0
              },
            ]
          },
          {
            name: '用药规范',
            sub: [
              {
                name: '剂量',
                sub: [
                  {
                    name: '首次剂量'
                  },
                  {
                    name: '后续剂量'
                  },
                  {
                    name: '最大剂量'
                  },
                  {
                    name: '最小剂量'
                  },
                  {
                    name: '成人用药'
                  }
                ],
                type: 0
              },
              {
                name: '给药方式',
                sub: [
                  {
                    name: '肠内给药'
                  },
                  {
                    name: '口服'
                  }
                ],
                type: 0
              },
            ]
          },
          {
            name: '治疗方案',
            sub: [
              {
                name: '单药治疗',
                sub: [
                  {
                    name: '青霉素类'
                  },
                  {
                    name: '头孢一代'
                  }
                ],
                type: 0
              },
              {
                name: '复合剂治疗',
                sub: [
                  {
                    name: '氨苄西林/舒巴坦'
                  },
                  {
                    name: '阿莫西林/克拉维酸'
                  }
                ],
                type: 0
              },
            ]
          },
        ]
      };
    },
    methods: {
      but(index) {
        var a = this.arr[index].name;
        var obj = this.arr[index];
        this.cityArr = obj.sub;
/*        this.isShow1 = false;*/
        this.isShow2 = true;
/*        this.label.push({name: a});*/
      },
      but1(index) {
        var a = this.cityArr[index].name;
        var obj = this.cityArr[index];
        this.districtArr = obj.sub;
/*        this.isShow2 = false;*/
        this.isShow3 = true;
/*        this.label.push({name: a});*/
      },
      but2(index) {

      },
      Sow() {
        this.isShow4 = true;
        this.isRouterAlive = false;
        this.$nextTick(() => (this.isRouterAlive = true))
      },
/*      sort() {
        this.container = !this.container;
        this.animated = !this.animated;
        var obj = this.arr;
        var obj1 = this.cityArr;
        var obj2 = this.districtArr;
        this.randomSort3(obj);
        this.randomSort3(obj1);
        this.randomSort3(obj2);
        },*/
/*      randomSort3(arr) {
        arr.sort(function (a, b) {
          return Math.random() - 0.5;
        });
        return arr;
      },*/
/*      breadcrumb(index){
        if(index==0){
          this.isShow1 = true;
          this.isShow2 = false;
          this.isShow3 = false;
          this.rollback(index)
        }
        if(index==1){
          this.isShow1 = false;
          this.isShow2 = true;
          this.isShow3 = false;
          this.rollback(index)
        }
      },*/
/*      rollback(index){
        index++;
        this.label.splice(index,1);
      },*/
    }
  }
</script>

<style scoped>
  .center {
    padding: 10px 40px;
    color: #fff;
    border-radius: 10px;
    background-image: url("../../../assets/blur-bg-blurred.jpg");
  }
  .h {
    border-bottom: 2px solid #fff;
  }
  .el-breadcrumb {
/*    height: 50px;*/
    line-height: 50px;
  }
  .san {
    color: #fff;
    font-size: 15px;
    cursor: pointer;
  }
  .rank {
    padding: 5px 0;
  }
  .stair {
    display: inline-block;
/*    height: 40px;
    line-height: 38px;*/
    width: 100px;
    text-align: center;
    border-right: 2px solid #5aaab4;
  }
  .stair > span {
    color: #5aaab4;
  }
  .frame {
    display: inline-block;
    white-space: nowrap;
    width: 175px;
    padding: 5px;
    margin: 5px;
    border-radius: 5px;
    background-image: url("../../../assets/blur-bg-blurred.jpg");
  }
  .ones {
    display: inline-block;
    cursor: pointer;
    width: 100%;
    height: 25px;
    line-height: 32px;
    text-align: center;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
  }
  .operation {
    width: 100%;
    height: 30px;
    line-height: 30px;
  }
  .rights {
    width: 100%;
/*    height: 30px;
    line-height: 30px;*/
    text-align: center
  }
  .btn:hover {
    background: #000;
  }
  .btnis {
    background: #000;
  }
  .btn1{
    width: 100%;
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    background: #fff;
    border: 1px solid transparent;
        outline: none;
  }

  .animated {
    animation-duration: 1s; /*动画时间*/
    animation-fill-mode: both; /*播放后的状态*/
  }
  .animated {
    animation-duration: 2s; /*动画时间*/
  }
  .container {
    animation-name:container; /*动画的名称*/
    transform-origin: center bottom; /*设置动画旋转元素的基点为：居中靠下*/
    cursor: pointer;
  }
  @keyframes container{
    0%,
    100%,
    20%,
    50%,
    80% {
      transition-timing-function: cubic-bezier(0.215,.61,.355,1); /*贝塞尔曲线 ： X1 Y1 X2 Y2*/
      transform: translate3d(0,0,0); /*设置只在Z轴上移动*/
    }
    40%,
    43%{
      transition-timing-function: cubic-bezier(0.755,0.50,0.855,0.060);
      transform: translate3d(0,-30px,0);
    }
    70%{
      transition-timing-function: cubic-bezier(0.755,0.050,0.855,0.060);
      transform: translate3d(0,-15px,0);
    }
    90%{
      transform: translate3d(0,-4px,0);
    }
  }
</style>

